import React, { ReactNode, useState } from 'react'
import { useSpring, animated } from 'react-spring'
import classNames from 'classnames';
interface Props {
    show: boolean;
    text?: string;
    children?: ReactNode;
}

const ToolsAnimation = (props: Props) => {
    const [styles, api] = useSpring(() => ({ opacity: 1, top: -20, left: 16 }));
    const [show, setShow] = useState(props.show);
    // // 播放动画
    const play = () => {
        setShow(true);
        api.start({ opacity: 0, top: -60, left: 26 });
    }
    return (
        <>
            <span className={classNames({
                'tools-item': true,
                'active': show
            })}
                onClick={play}
            >
                {
                    show && <animated.div style={{ position: 'absolute', ...styles }}>
                        {props.children}
                    </animated.div>
                }
                {props.children}  {props.text}
            </span>
        </>
    )
}

export default ToolsAnimation
